<template>
  <input type="text" :ref="refKey" />
  <button @click="switchRef">切换 ref 绑定的变量</button>
  <button @click="setInputValue">给 input 赋值</button>
</template>

<script setup lang="ts">
import { useTemplateRef, ref } from 'vue'
const refKey = ref('inputEl1')
const inputEl1 = useTemplateRef<HTMLInputElement>('inputEl1')
const inputEl2 = useTemplateRef<HTMLInputElement>('inputEl2')

function switchRef() {
  refKey.value = refKey.value === 'inputEl1' ? 'inputEl2' : 'inputEl1'
}

function setInputValue() {
  const curEl = refKey.value === 'inputEl1' ? inputEl1 : inputEl2
  console.log('curEl: ', curEl == inputEl1, curEl == inputEl2)
  if (curEl.value) {
    if (curEl == inputEl1) {
      curEl.value.value = 'Hello, world1!'
    } else {
      curEl.value.value = 'Hello, world2!'
    }
  }
}
</script>

<style scoped lang="scss"></style>
